<template>
	<view class="mine">
		<view class="user-info">
			<image class="user-header" src="../../static/mine/mine_43.png" mode=""></image>
			<view class="user-info-banner">
				<view class="username">小程序商城管理员</view>
				<view class="user-grade">
					<image src="../../static/mine/mine_07.png" mode=""></image>
					<text>12级达人</text>
				</view>
				<view class="user-enter">
					<view class="user-enter-item">
						<text class="item-son">1</text>
						<text class="item-son">商品收藏</text>
					</view>
					<view class="user-enter-item">
						<text class="item-son">0</text>
						<text class="item-son">文章收藏</text>
					</view>
					<view class="user-enter-item">
						<image src="../../static/mine/mine_14.png" class="item-son item-son-image" mode=""></image>
						<text class="item-son">店铺收藏</text>
					</view>
					<view class="user-enter-item">
						<image src="../../static/mine/mine_14.png" class="item-son item-son-image" mode=""></image>
						<text class="item-son">我的足迹</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-other">
			<view class="my-order">
				<view class="my-order-header">
					<view class="left">
						<image class="order-image" src="../../static/mine/mine_19.png" mode=""></image>
						<text>我的订单</text>
					</view>
					<view class="right">
						<text>查看全部订单</text>
						<image src="../../static/mine/mine_52.png" mode=""></image>
					</view>
				</view>
				<view class="my-order-nav">
					<view class="order-nav-item">
						<view class="nav-item-image item-image1">
							<view class="nav-message" v-if="">5</view>
						</view>
						<view class="nav-item-text">待付款</view>
					</view>
					<view class="order-nav-item">
						<view class="nav-item-image item-image2">
							<view class="nav-message" v-if="">10</view>
						</view>
						<view class="nav-item-text">待发货</view>
					</view>
					<view class="order-nav-item">
						<view class="nav-item-image item-image3">
							<view class="nav-message" v-if="isShowNav">0</view>
						</view>
						<view class="nav-item-text">待收货</view>
					</view>
					<view class="order-nav-item">
						<view class="nav-item-image item-image4">
							<view class="nav-message" v-if="">2</view>
						</view>
						<view class="nav-item-text">评价</view>
					</view>
					<view class="order-nav-item">
						<view class="nav-item-image item-image5">
							<view class="nav-message" v-if="isShowNav">0</view>
						</view>
						<view class="nav-item-text">退款/售后</view>
					</view>
				</view>
				<!-- 物流信息 -->
				<view class="logistics-information">
					<view class="log-info-header">
						<text class="log-info-title">物流信息</text>
						<text  class="log-info-time">2019-10-31  10:35</text>
					</view>
					<view class="log-info-list">
						<view class="log-info-item">
							<image src="../../static/mine/mine_43.png" mode=""></image>
							<view class="log-info-item-info">
								<text>未发货</text>
								<text>由【浙江义乌商品城】发往【山东济南转运中心】</text>
							</view>
						</view>
						<view class="log-info-item " id="log-info-active">
							<image src="../../static/mine/mine_46.png" mode=""></image>
							<view class="log-info-item-info">
								<text>运输中</text>
								<text>由【浙江义乌商品城】发往【山东济南转运中心】</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="other-list">
				<view class="other-list-item">
					<view class="left">
						<image src="../../static/mine/mine_49.png" mode=""></image>
						<text>会员俱乐部</text>
					</view>
					<view class="right">
						<image src="../../static/mine/mine_52.png" mode=""></image>
					</view>
				</view>
				<view class="other-list-item">
					<view class="left">
						<image src="../../static/mine/mine_56.png" mode=""></image>
						<text>我的礼物</text>
					</view>
					<view class="right">
						<image src="../../static/mine/mine_52.png" mode=""></image>
					</view>
				</view>
				<view class="other-list-item">
					<view class="left">
						<image src="../../static/mine/mine_58.png" mode=""></image>
						<text>预约订单</text>
					</view> 
					<view class="right">
						<text>您有新的订单</text>
						<image src="../../static/mine/mine_52.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				isShowNav:false
			};
		}
	}
</script>

<style lang="scss">
	.mine{
		.user-info{
			width: 100%;
			height: 313rpx;
			overflow: hidden;
			margin-top: 107rpx;
			position: relative;
			.user-header{
				width: 109rpx;
				height: 109rpx;
				position: absolute;
				border-radius: 50%;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.user-info-banner{
				width: 100%;
				height: 256rpx;
				background:url(../../static/mine/mine-banner.png);
				background-size: 100% 100%;
				margin-top: 56rpx;
				overflow: hidden;
				text-align: center;
				.username{
					margin-top: 72rpx;
					font-size: 29rpx;
					color: #fbfcfd;
				}
				.user-grade{
					image{
						width: 30rpx;
						height: 30rpx;
						border-radius: 10rpx;
					}
					text{
						font-size: 21rpx;
						color: #fbfcfd;
					}
				}
				.user-enter{
					display: flex;
					justify-content: space-around;
					margin-top: 16rpx;
					.user-enter-item{
						.item-son{
							display: block;
							font-size: 19rpx;
							color: #fbfcfd;
						}
						.item-son-image{
							width: 28rpx;
							height: 32rpx;
							margin: 0 auto;
						}
					}
				}
			}
		}
		.order-other{
			width: 708rpx;
			margin: 0 auto;
			.my-order{
				.my-order-header{
					height: 94rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					border-bottom: 2px solid #f1f0f0;
					position: relative;
					line-height: 94rpx;
					.left{
						display: flex;
						position: relative;
						.order-image{
							width: 42rpx;
							height: 42rpx;
							margin-top: 26rpx;
						}
						text{
							font-size: 42rpx;
							font-weight: bold;
							color: #484a59;
							margin-left: 12rpx;
						}
					}
					.right{
						text{
							color: #38383a;
							font-size: 19rpx;
							margin-right: 10rpx;
						}
						image{
							width: 11rpx;
							height: 20rpx;
						}
					}
				}
				.my-order-nav{
					margin-top: 30rpx;
					display: flex;
					justify-content: space-around;
					box-sizing: border-box;
					border-bottom: 2px solid #f1f0f0;
					padding-bottom: 20rpx;
					.order-nav-item{
						width: 108rpx;
						text-align: center;
						.nav-item-image{
							width: 44rpx;
							height: 40rpx;
							margin: 0 auto;
							position: relative;
							.nav-message{
								padding: 2rpx;
								position: absolute;
								right: -20rpx;
								top: -20rpx;
								border-radius: 50%;
								text-align: center;
								line-height: 30rpx;
								font-size: 28rpx;
								color: #0174ff;
							}
						}
						.item-image1{
							background: url(../../static/mine/mine_35.png);
							background-size: 100% 100%;
						}
						.item-image2{
							background: url(../../static/mine/mine_29.png);
							background-size: 100% 100%;
						}
						.item-image3{
							background: url(../../static/mine/mine_32.png);
							background-size: 100% 100%;
						}
						.item-image4{
							background: url(../../static/mine/mine_26.png);
							background-size: 100% 100%;
						}
						.item-image5{
							width: 53rpx;
							background: url(../../static/mine/mine_23.png);
							background-size: 100% 100%;
						}
						.nav-item-text{
							font-size: 24rpx;
							color: #6e6e6e;
							margin-top: 14rpx;
						}
					}
				}
				.logistics-information{
					width: 696rpx;
					margin: 30rpx auto;
					.log-info-header{
						display: flex;
						justify-content: space-between;
						.log-info-title{
							font-size: 24rpx;
							color: #000;
						}
						.log-info-time{
							font-size: 19rpx;
							color: #9a9a9a;
						}
					}
					.log-info-list{
						margin-top: 48rpx;
						.log-info-item{
							width: 100%;
							margin-bottom: 10rpx;
							display: flex;
							color: #9a9a9a;
							padding: 10rpx 0;
							image{
								width: 70rpx;
								height: 70rpx;
								margin-right: 18rpx;
							}
							.log-info-item-info{
								text{
									display: block;
									font-size: 24rpx;
								}
							}
						}
						#log-info-active{
							color: #f2a806 !important;
							box-shadow: 1px 1px 10px #eee;
						}
					}
				}
			}
			.other-list{
				.other-list-item{
					height: 86rpx;
					display: flex;
					justify-content: space-between;
					.left{
						display: flex;
						image{
							width: 47rpx;
							height: 47rpx;
							margin-top: 20rpx;
							margin-right: 12rpx;
						}
						text{
							font-size: 25rpx;
							color: #484a59;
							font-weight: bold;
							line-height: 86rpx;
						}
					}
					.right{
						text{
							font-size: 19rpx;
							color: #9a9a9a;
							margin-right: 10rpx;
						}
						image{
							width: 11rpx;
							height: 20rpx;
							margin-top: 33rpx;
						}
					}
				}
			}
		}
	}
</style>
